feat(ui): add health score facet to compare page#2348
feat(ui): add health score facet to compare page#2348hamdibenjarrar wants to merge 7 commits intonpmx-dev:mainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
Lunaria Status Overview🌕 This pull request will trigger status changes. Learn moreBy default, every PR changing files present in the Lunaria configuration's You can change this by adding one of the keywords present in the Tracked Files
Warnings reference
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdded a new comparison facet Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 1✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
app/composables/usePackageComparison.ts (1)
161-166:⚠️ Potential issue | 🟠 Major
descriptionis never populated, so the +10 quality bonus incomputeHealthScoreis unreachable.Line 372 awards +10 quality points when
data.package.descriptionis truthy, but heredescriptionis explicitly set toundefined. The packument typically contains adescriptionfield at the root level, so this should be wired up.🐛 Proposed fix
return { package: { name: pkgData.name, version: latestVersion, - description: undefined, + description: pkgData.description, },
🧹 Nitpick comments (2)
test/nuxt/composables/use-package-comparison.spec.ts (2)
145-168: "Perfect package" test omitsdescription, leaving the +10 quality bonus untested.The
computeHealthScorefunction awards +10 quality points whendata.package.descriptionis truthy (line 372 inusePackageComparison.ts). This test intends to verify a "perfect" package but themakeData()override doesn't include adescriptionfield, so that scoring path is never exercised.Consider adding
descriptionto the package object to truly test the perfect-score scenario:🔧 Suggested fix
const score = computeHealthScore( makeData({ + package: { name: 'test', version: '1.0.0', description: 'A test package' }, metadata: { lastUpdated: new Date().toISOString(), license: 'MIT', },
132-138: Consider hoistingmakeDataoutside thedescribeblock.The static analysis correctly flags that
makeDatadoesn't capture any variables from its parent scope. Moving it to module level (or at least outside the innerdescribe) would satisfy the linter and make it reusable for additional test cases.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: b6ba5fff-6609-4994-a829-462c5c89a1a3
📒 Files selected for processing (9)
app/composables/useFacetSelection.tsapp/composables/usePackageComparison.tsi18n/locales/ar-EG.jsoni18n/locales/en.jsoni18n/locales/fr-FR.jsoni18n/schema.jsonshared/types/comparison.tstest/nuxt/components/compare/FacetSelector.spec.tstest/nuxt/composables/use-package-comparison.spec.ts
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
test/nuxt/composables/use-package-comparison.spec.ts (1)
131-137: Consider movingmakeDatato module level.The helper doesn't capture any variables from its enclosing scope, so it could be hoisted to module level for clearer organisation and to resolve the linter warning.
♻️ Proposed refactor
Move the helper above the
describe('usePackageComparison')block:+function makeData(overrides: Partial<PackageComparisonData> = {}): PackageComparisonData { + return { + package: { name: 'test', version: '1.0.0' }, + directDeps: 2, + ...overrides, + } +} + describe('usePackageComparison', () => { afterEach(() => { vi.unstubAllGlobals() }) // ... - function makeData(overrides: Partial<PackageComparisonData> = {}): PackageComparisonData { - return { - package: { name: 'test', version: '1.0.0' }, - directDeps: 2, - ...overrides, - } - }
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0524525e-682f-4b29-9d4b-4fa85c8af851
📒 Files selected for processing (2)
app/composables/usePackageComparison.tstest/nuxt/composables/use-package-comparison.spec.ts
|
This is your second PR related to the health score, and the second time you've submitted an automated PR. AI assistance is permitted, but automation is not allowed in this project. |
🔗 Linked issue
No linked issue.
🌐 Context
The compare page shows a lot of useful data per package but there's no single signal that summarizes the overall health. I added a Health Score facet to fill that gap.
📝 Description
Added
healthScoreas a new facet in the compare page. Score goes from 0 to 100, computed from data that npmx already fetches — no external API used.How it breaks down:
Deprecated packages automatically score 0. Displays as
XX/100with good/warning/bad status colors and a tooltip explaining the score.Tested locally: react 90/100, vue 97/100, svelte 97/100.
Changes
shared/types/comparison.ts— addedhealthScoreto theComparisonFacettype andFACET_INFOapp/composables/usePackageComparison.ts— added exportedcomputeHealthScore()function and wired it into the facet switchapp/composables/useFacetSelection.ts— label, description, chartable: truecomputeHealthScore()covering deprecated, critical vuln, perfect package, no data